<template>
  <el-card>
    <!-- 表格 -->
    <!-- :data="" -->
    <el-table :data="permission" border row-key="id" :expand-row-keys="rowId">
      <el-table-column label="名称" prop="name" />
      <el-table-column label="权限值" prop="code" />
      <el-table-column label="跳转权限值" prop="toCode"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <el-button
            type="primary"
            size="mini"
            @click="addPermission(row)"
            icon="el-icon-plus"
            title="添加菜单"
            :disabled="row.type === 2"
          ></el-button>
          <el-button
            type="primary"
            :disabled="row.id === '1'"
            size="mini"
            icon="el-icon-edit-outline"
            @click="changePermission(row)"
            title="修改菜单"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            title="删除"
            :disabled="row.id === '1'"
            @click="deletePermission(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加or修改对话框 -->
    <el-dialog :title="permissionForm.id ? '更新菜单' : '添加菜单'" :visible.sync="dialogFormVisible" :before-close="beforeClose">
      <el-form :model="permissionForm" ref="permissionForm" :rules="rules">
        <el-form-item label="名称" :label-width="formLabelWidth" required prop="name">
          <el-input v-model="permissionForm.name" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" :label-width="formLabelWidth" required prop="code">
          <el-input v-model="permissionForm.code" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="跳转路由权限值" :label-width="formLabelWidth" v-if="permissionForm.level === 4">
          <el-input v-model="permissionForm.toCode" autocomplete="off" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('permissionForm')" size="small">取 消</el-button>
        <el-button type="primary" @click="save('permissionForm')" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
// 导入api
import permissionAPI from '@/api/acl/permission'
// 导入
import { cloneDeep } from 'lodash'
export default {
  name: 'VPermission',
  data() {
    let testName = (rule, value, callback) => {
      console.log(rule)
      // console.log(value)
      // console.log(callback())
      if (value === '') {
        callback(new Error('名称必须输入'))
        return
      } else if (typeof value !== 'number') {
        callback(new Error('名称不能是数字开头'))
      }
      // 如果验证成功,则放行
      callback()
    }
    let textCode = (rule, value, callback) => {
      // console.log(rule)
      // console.log(value)
      // console.log(callback())
      if (value === '') {
        callback(new Error('权限值必须输入'))
        return
      } else if (value === this.permissionForm.name) {
        callback(new Error('名称和权限值不能一致'))
      } else if (typeof value !== 'number') {
        callback(new Error('名称不能是数字开头'))
      }
      // 如果验证成功,则放行
      callback()
    }
    return {
      permission: [], // 存储表格需要展示的数据
      rowId: [],
      // 以下为对话框需要的数据
      dialogFormVisible: false, // 控制对话框的展示和隐藏
      // 收集表单输入框的数据
      permissionForm: {
        name: '', // 输入的名称
        code: '', // 输入的权限值
        level: undefined,
        pid: '',
        toCode: '',
        type: 1
      },
      formLabelWidth: '120px', // 长度
      // 验证规则
      rules: {
        name: [{ validator: testName, trigger: 'blur' }],
        code: [{ validator: textCode, trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取权限列表
    async getPermissionListData() {
      // 发送请求
      const result = await permissionAPI.getPermissionList()
      console.log(result)
      if (result.code === 20000) {
        this.permission = result.data.children
        this.rowId = [result.data.children[0].id]
      }
    },

    // -------------------------------------------------------- 操作按钮
    // 删除按钮
    deletePermission(row) {
      // 删除当前这一项数据
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 在成功回调中调用api发送请求
          // 从当前传递的参数中取出当前项的id值
          const { id } = row
          // 调用接口
          const result = await permissionAPI.removePermission(id)
          if (result.code === 20000) {
            // 提示用户
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 重新获取到最新的数据
            this.getPermissionListData()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 添加按钮
    addPermission(row) {
      // 取反
      this.dialogFormVisible = !this.dialogFormVisible
      // console.log(row)
      // 处理数据
      this.permissionForm = {
        name: this.permissionForm.name,
        code: this.permissionForm.code,
        level: row.level + 1,
        pid: row.id,
        toCode: this.permissionForm.toCode,
        type: row.level + 1 === 4 ? 2 : 1
      }
      // console.log(this.permissionForm)

      // this.permissionForm.level = row.level + 1
      // this.permissionForm.pid = row.id
      // this.permissionForm.type = this.permissionForm.level === 4 ? 2 : 1
    },

    // 对话框保存按钮
    async save(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // console.log(this.permissionForm)
          // 组装需要的数据
          // 获取到用户输入的内容,并进行调用接口发送请求
          const result = await permissionAPI.addPermission(this.permissionForm)
          // console.log(result)
          if (result.code === 20000) {
            // 提示用户添加成功
            this.$message({
              message: this.permissionForm.id ? '更新成功' : '添加成功',
              type: 'success'
            })
            // 取反
            this.dialogFormVisible = !this.dialogFormVisible
            // 重新获取到最新的数据
            this.getPermissionListData()
          }
        } else {
          console.log('表单验证失败!!')
          return false
        }
      })
    },

    // 新增用户表单验证 -- 取消按钮
    resetForm(formName) {
      // 验证之后隐藏弹框
      this.dialogFormVisible = false
      // 清除上一次的表单数据
      this.permissionForm = {}
      this.$refs[formName].resetFields()
    },

    beforeClose(done) {
      this.permissionForm = {}
      done()
    },

    // 修改按钮
    changePermission(row) {
      // 取反
      this.dialogFormVisible = !this.dialogFormVisible
      // 数据回显
      this.permissionForm = cloneDeep(row)
    }
  },
  mounted() {
    this.getPermissionListData()
  }
}
</script>

<style lang="less" scoped></style>
